<template>
  <div class="app-container">
    <h3>
      <el-button
        type="primary"
        icon="Plus"
        @click="add"
        v-hasPermi="['member:mpTempSet:add']"
        >添加</el-button
      >
    </h3>
    <x-table :isLoading="tableLoading" :tableData="info" :propList="propList">
      <template #op="scope">
        <!-- // v-hasPermi="['api:mpManage:changeTempSet']" -->
        <el-button
          type="primary"
          link
          icon="Edit"
          @click="edit(scope.row)"
          v-hasPermi="['member:mpTempSet:change']"
          >编辑</el-button
        >
        <!-- v-hasPermi="['api:mpManage:delTempSet']" -->
        <el-button
          type="primary"
          link
          icon="Delete"
          @click="del(scope.row)"
          v-hasPermi="['member:mpTempSet:del']"
          >删除</el-button
        >
      </template>
    </x-table>
    <el-dialog title="模版配置" v-model="isShowDialog" center>
      <el-form ref="baseInfo" :model="baseInfo" :rules="baseInfoRules">
        <el-form-item prop="type" label="类型" :label-width="labelWidth">
          <el-select
            style="width: 400px"
            v-model="baseInfo.type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="temp_id" label="模板" :label-width="labelWidth">
          <el-select
            style="width: 400px"
            v-model="baseInfo.temp_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in tempList"
              :key="item.id"
              :label="item.temp_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="[21].includes(baseInfo.type)">
          <!-- <template v-if="[21, 22, 23].includes(baseInfo.type)"> -->
          <!-- <el-form-item
            prop="nickname"
            label="通知管理员昵称"
            label-width="150px"
          >
            <el-input
              v-model="baseInfo.nickname"
              placeholder="通知管理员昵称"
              style="width: 300px"
            ></el-input>

            <el-button
              type="primary"
              icon="Search"
              @click="searchUser"
              style="margin-left: 30px"
              >搜索</el-button
            >
            <span style="color: #f00; margin-left: 30px; font-weight: bold"
              >注意：只有关注公众号的管理员才能收到通知</span
            >
          </el-form-item> -->
          <el-form-item
            v-if="baseInfo.type == 21"
            prop="money"
            label="告警金额设置"
            label-width="150px"
          >
            <el-input
              v-model="baseInfo.money"
              placeholder="告警金额设置,默认 300"
              style="width: 300px"
            ></el-input>
            <span style="color: #f00; margin-left: 30px; font-weight: bold">
              当前余额+授信≤告警金额将会收到通知，不设置将默认为 300
            </span>
          </el-form-item>
          <!-- {{ userInfo }} -->
          <el-form-item
            prop="money"
            label=""
            label-width="150px"
            v-if="userInfo.headimgurl"
          >
            <!-- <div style="display: flex; flex-direction: column">
              <img
                :src="userInfo.headimgurl"
                style="width: 60px; height: 60ox"
                alt=""
              />
              <div style="display: flex; align-items: center">
                <el-checkbox v-model="isCheckUser" label="选择" size="large" />
                <span
                  style="
                    margin-left: 30px;
                    color: #f00;
                    font-style: italic;
                    font-weight: bold;
                  "
                  >注意：请确保管理员用户正确，否则其它粉丝收到通知将可能被认定为骚扰</span
                >
              </div>
            </div> -->
          </el-form-item>
        </template>

        <!-- <span style="color: #f00; margin-left: 30px; font-weight: bold"
          >计算方式：</span
        > -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShowDialog = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList as getTempList } from "@/api/mpManage/mpTemp";
import { getUserByName } from "@/api/mpManage/mpUser";
import {
  getList,
  change,
  del,
  add,
  getTempSetTypeList,
} from "@/api/mpManage/mpTempSet";

export default {
  name: "mpmpConfigmpTempSet",
  data() {
    return {
      isCheckUser: true,
      labelWidth: "100px",
      typeList: [],
      tableLoading: true,
      isShowDialog: false,
      propList: [
        {
          label: "通知类型",
          prop: "type_name",
        },
        {
          label: "模板名称",
          prop: "temp.temp_name",
        },
        {
          label: "创建时间",
          prop: "created_at",
        },
        {
          label: "操作",
          slotName: "op",
          showOverflowTooltip: false,
          fixed: "right",
        },
      ],
      baseInfo: {},
      baseInfoRules: {
        type: [{ required: true, message: "请选择类型" }],
        temp_id: [{ required: true, message: "请选择模板" }],
      },
      tempList: [],
      info: [],
      userInfo: {},
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getSetList();
      this.getInfo();
      this.getTempSetTypeList();
    },
    async getTempSetTypeList() {
      const { data } = await getTempSetTypeList();
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          const label = data[key];
          this.typeList.push({ label: label, value: +key });
        }
      }
      console.log(this.typeList);
    },
    async getSetList() {
      const { data } = await getList();
      console.log(data);
      this.info = data;
      this.tableLoading = false;
    },
    // typeChange(e) {
    //   console.log(e);
    // },
    async searchUser() {
      // 搜索用户
      const { data } = await getUserByName(this.baseInfo.nickname);
      console.log(data);
      this.userInfo = data || {};
    },
    async getInfo() {
      const params = {
        type: "all",
      };
      const { data } = await getTempList(params);
      console.log(`data`, data);
      this.tempList = data;
    },
    add() {
      this.baseInfo = this.$options.data().baseInfo;
      this.isShowDialog = true;
      this.$nextTick(() => {
        this.$refs.baseInfo.clearValidate();
      });
    },
    edit(item) {
      console.log(`item`, item);
      this.isShowDialog = true;
      this.baseInfo = { ...item };
      // 复制管理员
      this.userInfo = item.user || {};
    },
    async del(item) {
      console.log(item);
      const alertRes = await this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (alertRes == "confirm") {
        await del(item.id);
        this.$message.success("删除成功");
        this.getSetList();
      }
    },
    submit() {
      // console.log(this.isCheckUser);
      // console.log(this.baseInfo);
      // return false;
      this.$refs.baseInfo.validate(async (valid) => {
        if (valid) {
          console.log(this.baseInfo);
          // if (this.baseInfo.type == 21) {
          //   if (!this.isCheckUser) {
          //     this.$message.error("请选择管理员");
          //     return false;
          //   }
          //   if (!this.userInfo.id) {
          //     // 未找到用户
          //     this.$message.error("请选择管理员");
          //     return false;
          //   }
          // }
          const params = {
            ...this.baseInfo,
            mp_user_id: this.userInfo.id,
          };
          if (params.id) {
            await change(params);
          } else {
            await add(params);
          }
          this.$message.success("操作成功");
          this.isShowDialog = false;
          this.getSetList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
